<template>
  <div class="case-retail">
    <div class="index-title">
      <h2>案例灵感</h2>
      <p>Inspiration Gallery</p>
    </div>
    <div class="case-box">
      <swiper :options="swiperOption" class="swiper-container-case">
        <swiper-slide class="swiper-slide" v-for="(item, index) in caseArr" :key="index">
          <router-link :to="{path:'/case-details', query:{id: item.id, type: type}}">
            <img class="swiper-slide-img" :src="item.img_url" :alt="item.title" />
            <p class="swiper-slide-desc">{{item.title}}</p>
          </router-link>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="more">
      <router-link :to="{path:'/case', query:{type: type}}">查看更多</router-link>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'CaseRetail',
    props: {
      caseArr: {
        type: Array,
        required: true,
        default: function() {
          return []
        }
      },
      type: {
        required: true,
        default: 0
      }
    },
    data() {
      return {
        swiperOption: {
          el: '.swiper-container-case',
          loop: true,
          pagination: {
            el: '.swiper-container-case .swiper-pagination',
            clickable: true,
            bulletActiveClass: 'my-bullet-active',
            bulletClass: 'swiper-pagination-bullet'
          }
        }
      }
    },
  }
</script>
<style lang="less">
  .case-retail {
    .swiper-pagination-bullets .swiper-pagination-bullet {
      background: #000;
      opacity: 1;
      margin: 0 6px;
    }
    .my-bullet-active {
      background: #000;
      opacity: 1;
      position: relative;

      &:after {
        content: '';
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
</style>
<style lang="less" scoped>
  .case-retail {
    padding: 0.18rem 0.25rem 0.18rem;

    .swiper-container-case {
      height: 4.72rem;

      .my-bullet-active {
        background: 000;
      }

      .swiper-slide-img {
        display: block;
        width: 100%;
        height: 3.6rem;
      }

      .swiper-slide-desc {
        margin-top: 0.1rem;
        color: #000;
      }

      .swiper-pagination-bullets .swiper-pagination-bullet {
        background: #000;
        opacity: 1;
        margin: 0 6px;
      }
    }

    .index-title {
      text-align: center;
      margin-bottom: 0.3rem;

      h2 {
        line-height: 1.2;
      }

      p {
        font-size: 0.25rem;
        color: #616161;
      }
    }

    .case-li {
      margin-bottom: 0.36rem;

      img {
        display: block;
        width: 100%;
      }

      p {
        font-size: 0.25rem;
        line-height: 0.43rem;
        margin-top: 0.09rem;
        color: #2d2d2d;
      }
    }

    .more a {
      display: block;
      width: 1.63rem;
      height: 0.48rem;
      line-height: 0.48rem;
      text-align: center;
      margin: 0 auto;
      border: 1px solid #3f3f3f;
      color: #3f3f3f;
      font-size: 0.25rem;
    }
  }
</style>
